<template>
	<view class="SelectLocation">
		<u-navbar title="">
			<u-search placeholder="搜索地点" v-model="keyword" @search="searchBtn" :show-action="true" action-text="搜索" :animation="true" @custom="searchBtn"></u-search>
			<view style="width: 24upx;"></view>
		</u-navbar>
		<view class="SelectLocationBox">
			<view class="LocationItem" @click="current=-1">
				<view class="LocationName">不显示位置</view>
				<view v-if="current==-1">
					<u-icon name="checkbox-mark" color="#FFAC3F" size="35"></u-icon>
				</view>
			</view>
			<view class="LocationItem" v-for="(item,index) in 20" :key="index" @click="SelectLocation(index)">
				<view class="addressBox">
					<view class="addressName">广美毕业展</view>
					<view class="Detailed-address">景点 | 广州市番禺区大学城外环西路与大学城广美路交叉口西北150米</view>
				</view>
				<view v-if="current==index">
					<u-icon name="checkbox-mark" color="#FFAC3F" size="35"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword:"",
				current:-1
			}
		},
		methods: {
			SelectLocation(index){
				this.current = index
			},
			//搜索
			searchBtn(){
				alert(this.keyword)
			}
		}
	}
</script>

<style scoped lang="less">
.SelectLocation{
	padding-top: 88upx;
	.SelectLocationBox{
		padding: 32upx 24upx;
		.LocationItem{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24upx 0;
			border-bottom: 2upx solid #F5F5F5;
			.LocationName{
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
			.addressBox{
				.addressName{
					font-size: 24upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
				.Detailed-address{
					font-size: 16upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #666666;
					margin-top: 16upx;
				}
			}
		}
	}
}
</style>
